<template>
  <div id="scoreQuery" class="content-section">
    <div class="card mb-4 shadow-sm">
      <div class="card-header bg-gradient-primary text-white rounded-top">
        <h2 class="mb-0 text-center">成绩查询</h2>
      </div>
      <div class="card-body">
        <!-- 将姓名和区域输入框放在同一行 -->
        <div class="row g-3 align-items-center mb-4">
          <div class="col-md-4">
            <label for="region" class="form-label">区域</label>
            <input type="text" v-model="region" class="form-control" id="region">
          </div>
          <div class="col-md-4">
            <label for="studentName" class="form-label">姓名</label>
            <input type="text" v-model="studentName" class="form-control" id="studentName">
          </div>
          <div class="col-md-4 d-flex gap-2 align-items-end">
            <button @click="submitForm" class="btn btn-primary flex-grow-1">搜索</button>
            <button @click="resetForm" class="btn btn-outline-secondary flex-grow-1">重置</button>
          </div>
        </div>
      </div>
    </div>
    <!-- 显示查询结果的表格 -->
    <div id="scoreResult" class="card mt-3 shadow-sm"> 
      <div class="card-body">
        <table class="table table-striped">
          <thead>
            <tr>
              <th>区域</th>
              <th>员工编号</th>
              <th>姓名</th>
              <th>邮箱</th>
              <th>考试科目</th>
              <th>成绩</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="result in scoreResults" :key="result.id">
              <td>{{ result.region }}</td>
              <td>{{ result.employeeId }}</td>
              <td>{{ result.studentName }}</td>
              <td>{{ result.email }}</td>
              <td>{{ result.subject }}</td>
              <td>{{ result.score }}</td>
            </tr>
          </tbody>
        </table>
        <div class="d-flex justify-content-between align-items-center mt-3">
          <div class="d-flex gap-2">
            <select v-model="pageSize" class="form-select" style="width: 100px">
              <option :value="10">10条/页</option>
              <option :value="20">20条/页</option>
              <option :value="50">50条/页</option>
            </select>
          </div>
          <div class="d-flex gap-2 align-items-center">
            <button 
              @click="currentPage--" 
              :disabled="currentPage === 1"
              class="btn btn-outline-primary"
            >上一页</button>
            <span>第 {{ currentPage }} 页 / 共 {{ Math.ceil(scoreResults.length / pageSize) }} 页</span>
            <button 
              @click="currentPage++"
              :disabled="currentPage * pageSize >= scoreResults.length"
              class="btn btn-outline-primary"
            >下一页</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import axios from 'axios'; // 引入 axios

const region = ref('');
const studentName = ref('');
const scoreResults = ref([]);
const currentPage = ref(1);
const pageSize = ref(10);

const paginatedResults = computed(() => {
  const start = (currentPage.value - 1) * pageSize.value;
  return scoreResults.value.slice(start, start + pageSize.value);
});

const submitForm = async () => {
  try {
    // 假设后端接口地址为 /api/score 查询时带上区域和姓名参数
    const response = await axios.get('/api/score', {
      params: {
        region: region.value,
        studentName: studentName.value
      }
    });
    scoreResults.value = response.data;
  } catch (error) {
    console.error('查询成绩失败:', error);
  }
};

const resetForm = () => {
  region.value = '';
  studentName.value = '';
  scoreResults.value = [];
};
</script>

<style scoped>
.card-header {
  background: linear-gradient(to right, #007BFF, #0056b3);
  color: white;
}

.btn-primary {
  background: linear-gradient(to right, #007BFF, #0056b3);
  border: none;
  transition: all 0.3s ease;
}

.btn-primary:hover {
  background: linear-gradient(to right, #0056b3, #007BFF);
}

.table {
  background-color: white;
  border-radius: 8px;
  overflow: hidden;
}

.form-control {
  border-radius: 8px;
}

.pagination {
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  border-radius: 8px;
}
</style>